/** * @description: 公共饼图组件 */
<template>
  <div class="floor">
    <div class="title-wrapper">
      <h4>{{ titleText }}</h4>
      <!-- 非课堂请假离校状态不显示，并且只有首页的echart需要详情详情 -->
      <span v-if="titleText !== '非课堂请假离校状态' && $route.path === '/home'" @click="skipDetail(path)"
        >详情 <van-icon name="arrow" size="14"
      /></span>
    </div>
    <div class="echart-box">
      <div :id="pieShowId" class="pie" v-if="optionData && optionData.length"></div>
      <van-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PieEchart',
  props: ['optionData', 'pieShowId', 'titleText', 'path', 'pieTitleText', 'lengendPlace', 'colorList'], //传递的参数数组，id，title，详情跳转路径，饼图title，lengend位置，颜色
  data() {
    return {
      myChart: {},
    }
  },
  watch: {
    optionData: {
      handler(val) {
        this.initdata()
      },
      deep: true,
    },
  },
  mounted() {
    this.initdata()
    window.addEventListener('resize', () => {
      this.myChart.resize() //动态计算大小
    })
  },
  methods: {
    initdata() {
      //计算总数
      let textNum = this.optionData.reduce((sumData, key) => {
        return sumData + key.value
      }, 0)

      this.myChart = this.$echarts.init(document.getElementById(this.pieShowId))
      this.myChart.setOption({
        color: this.colorList,
        title: {
          text: textNum,
          x: '28%',
          y: '40%',
          textStyle: {
            color: '#141418',
            fontSize: 26,
            fontWeight: 500,
          },
          subtext: this.pieTitleText,
          subtextStyle: {
            color: '#141418',
            fontSize: 14,
            align: 'center',
          },
          itemGap: 10,
          textAlign: 'center',
        },

        legend: {
          orient: 'vertical',
          type: 'scroll',
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 20,
          top: (this.lengendPlace && this.lengendPlace.top) || '40%',
          left: (this.lengendPlace && this.lengendPlace.left) || '60%',
          formatter: v => {
            const arr = this.optionData.find(e => e.name == v)
            return `${v.length > 6 ? v.substr(0, 5) + '...' : v} ${arr.value}`
          },
          textStyle: {
            color: '#5F5F6B',
            fontSize: 14,
            lineHeight: 16,
          },
          tooltip: {
            show: true,
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '75%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.optionData,
          },
        ],
      })
    },

    //跳转详情-触发(五困生和请假跳转)
    skipDetail(path, active) {
      this.$router.push({
        path,
        query: {
          active,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  padding-bottom: 0;
  min-height: 250px;
  .title {
    font-size: $fz16;
    color: $color-title;
    font-weight: normal;
  }
  .echart-box {
    width: 100%;
    height: 250px;
    .pie {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
